<template>
	<el-dialog
		title="预览页面"
		class="dialog-share dialog"
		:visible.sync="dialog"
		width="100%"
		:before-close="cancel"
		:close-on-click-modal="false"
		:append-to-body="true"
	>
		<celerityTablePage
			:pageJson="designPageJson"
			:tableList="tableList"
			:isOperation="true"
			:highlightFiled="['evenName', 'createDept']"
			:dictMap="dictMap"
			:scratchable="scratchable"
			@highlightEvent="highlightEvent"
			@searchQuery="searchQuery"
			@resetQuery="resetQuery"
			@buttonEvent="buttonEvent"
			@currentChange="currentChange">
			<!-- 搜索框 -->
			<template #search>
				<el-form-item label="测试插槽" prop="nameBox">
					<el-input v-model="queryParams.nameBox" :placeholder="`测试插槽`" clearable size="small" @keyup.enter.native="handleQuery" />
				</el-form-item>
			</template>
			<!-- 顶部按钮插槽 -->
			<template #topButton>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="searchQuery">测试自定义顶部按钮</el-button>
			</template>
			<!-- 顶部右侧自定义插槽 -->
			<template #topToolbar>
				<span>我是测试顶部右侧自定义代码</span>
			</template>
			<!-- 表格列插槽 -->
			<template #tableColumn>
				<el-table-column label="测试表格列表" prop="evenName">
					<template slot-scope="scope">
						{{ scope.row.evenName }}
					</template>
				</el-table-column>
			</template>
			<!-- 表格列内插槽 -->
			<template #produceCode>
				<span>嘿嘿嘿</span>
			</template>
			<!-- 表格操作栏按钮插槽 -->
			<template #rowButton>
				<el-button type="primary" icon="el-icon-search" size="text" @click="searchQuery">测试表格操作栏按钮</el-button>
			</template>
		</celerityTablePage>
	</el-dialog>
</template>

<script>
import celerityTablePage from '@/celerityTablePageView/celerityTablePage'

export default {
  name: 'previewPage',
  components: {
	celerityTablePage
  },
  props: {
    dialog: {
		type: Boolean,
		default: false
	},
	pageJson: {
		type: Object,
		default: () => {}
	},
	dictMap: {
		type: Object,
		default: () => {}
	}
  },
  data() {
	return {
		// 页面json
		designPageJson: this.pageJson,
		tableList: [{
			findTime: '2022-03-17',
			evenName: 'hahaha',
			evenDesc: '6666',
			createDept: '测试部门',
			eventStatus: 'ddd'
		}],
		scratchable: {
			imageFiled: 'img',
			infoFiled: ['title']
		},
		queryParams: {
			nameBox: ''
		}
	}
  },
  created() {
  },
  methods: {
	cancel() { 
		this.$emit('close')
	},
	// 单击高亮字段
	highlightEvent(item, data) {
		console.log(item, data)
	},
	// 单击行数据
	currentChange(data) {
		console.log(data, 11111111)
	},
	// 按钮事件
	buttonEvent(data) {
		console.log(data)
		// buttonRows: 按钮数据，
		// buttonType: 按钮类型，
		// rowsData：表格行数据,
	},
	// 搜索按钮
	searchQuery(data) {
		console.log(data)
	},
	// 重置按钮
	resetQuery() {
		console.log('reset')
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.dialog-share .el-radio:last-child{
		margin-right: 20px !important;
	}
</style>
